<template>
<div>
  <div>
    <van-nav-bar
        title="景区列表"
        left-text="返回"
        left-arrow
        @click-left="back()"
    />
  </div>
  <div>
    <router-link to='/search'>
      <van-button type="primary" size="large" color="gray">点击搜索目的地</van-button>
    </router-link>
  </div>
  <div class="dv1" v-for="a in attractions">
    <van-row>
      <van-col :span="10">
        <img class="img1" :src="a.imgurl">
      </van-col>
      <van-col :span="13">
        <h4 class="dv2">{{ a.name }} 跟团价：{{ a.price }}</h4>
        <div class="dv2">{{ a.label }}</div>
        <div class="dv2">所在城市：{{ a.city }}</div>
        <div class="dv2">
          <div>
            <van-button class="btn1" type="danger" @click="look(a.id)">查看详情</van-button>
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</div>
</template>

<script>
export default {
  data(){
    return{
      attractions:[]
    }
  },mounted() {
      this.created();
  },
  methods:{
    created() {
      this.attractions = this.$store.state.attractions
    },back(){
      history.back();
    },look(id){
      this.axios.get("api/attractions/selectById.do?id="+id).then((r)=>{
        if(r.data.code==200){
          console.log(r.data.data)
          this.$store.commit("setattraction",r.data.data)
          this.$router.push("/testlist");
        }else {
          this.$toast("查询失败");
        }
      })

    }
  }
}

</script>

<style scoped>
.dv1{
  width: 90%;
  margin-left: 5%;
  margin-bottom: 10px;
}
.dv2{
  margin: 5px;
  font-size: 13px;
}
.img1{
  width: 150px;
  height: 100px;
}
.btn1{
  width: 60%;
  height: 20%;
  margin-left: 10%;
  margin-top: 5%;
  border-radius: 20px;
  margin-bottom: 2px;
}
</style>